<template>
  <Card>
    <EchartsChart :option="barOption" />
  </Card>
  <Card>
    <EchartsChart :option="lineOption" />
  </Card>
  <Card>
    <EchartsChart :option="pieOption" />
  </Card>
</template>

<script>
export default {
  name: 'Left',
}
</script>
<script setup>
import { onMounted, reactive } from "vue";
import Card from '@/components/Card/index.vue';
import EchartsChart from '@/components/EchartsChart/index.vue';

onMounted(() => {
  setTimeout(() => {
    const result = {
      barXaxis: [
        '旅游行业',
        '游戏行业',
        '电商行业',
        '医疗行业',
        '金融行业',
        '教育培训',
        '餐饮行业',
      ],
      barSeriesData: [300, 200, 400, 250, 550, 450, 350],
      lineXaxis: [
        '1月',
        '2月',
        '3月',
        '4月',
        '5月',
        '6月',
        '7月',
        '8月',
        '9月',
        '10月',
        '11月',
        '12月',
      ],
      line1SeriesData: [
        300, 200, 400, 250, 550, 450, 300, 200, 400, 250, 550, 450,
      ],
      line2SeriesData: [
        250, 550, 450, 300, 200, 400, 250, 550, 450, 300, 200, 400,
      ],
      pieSeriesData: [
        {
          name: '20岁以下',
          value: 11,
        },
        {
          name: '20-29岁',
          value: 22,
        },
        {
          name: '30-39岁',
          value: 33,
        },
        {
          name: '40-49岁',
          value: 44,
        },
        {
          name: '50岁以上',
          value: 55,
        },
      ],
    };

    barOption.xAxis.data = result.barXaxis;
    barOption.series.data = result.barSeriesData;
    lineOption.xAxis.data = result.lineXaxis;
    lineOption.series[0].data = result.line1SeriesData;
    lineOption.series[1].data = result.line2SeriesData;
    pieOption.series.data = result.pieSeriesData;
  }, 500);
});

const barOption = reactive({
  title: {
    text: '各行业程序员数量',
  },
  xAxis: {
    data: [],
  },
  series: {
    name: '金融行业',
    type: 'bar',
    data: [],
    barWidth: 15,
    itemStyle: {
      borderRadius: 3,
    },
  },
  tooltip: {
    axisPointer: {
      type: 'shadow',
    },
  },
  legend: {
    show: false,
  },
});

const lineOption = reactive({
  title: {
    text: '学习变化',
  },
  xAxis: {
    data: [],
  },
  series: [
    {
      name: '新增项目',
      type: 'line',
      data: [],
      smooth: true,
    },
    {
      name: '新增技能',
      type: 'line',
      data: [],
      smooth: true,
    },
  ],
});

const pieOption = reactive({
  title: {
    text: '工程师年龄分布',
  },
  xAxis: {
    show: false,
  },
  yAxis: {
    show: false,
  },
  series: {
    name: '年龄分布',
    type: 'pie',
    data: [],
    radius: ['35%', '50%'],
    labelLine: {
      show: false,
    },
    label: {
      show: false,
    },
  },
  legend: {
    top: 'auto',
    bottom: 5,
    itemWidth: 8,
    left: 'center',
  },
  tooltip: {
    trigger: 'item',
    formatter: `{a}<br/>{b}: {c} ({d}%)`,
    textStyle: {
      fontSize: 8,
    },
  },
});
</script>

<style scoped>

</style>
